<template>
  <div class="history-card-wrapper" title="" ref="wrapper">
    <div class="title">
      <h3>历史记录</h3>
      <ul class="utils">
        <li class="iconfont icon-search" @click="search()" title="搜索"></li>
        <li class="iconfont icon-financial_omit type-select" title="筛选">
          <ul class="history-type-list">
            <li :class="{bgLight: historyType === 0}"
            @click="this.historyType=0">文章</li>
            <li :class="{bgLight: historyType === 1}"
            @click="this.historyType=1">资源</li>
          </ul>
        </li>
        <li v-if="!searching" class="iconfont icon-clear" title="清空所有记录"
        @click="cleanAllHistory"></li>
        <li v-else class="iconfont icon-cancel" @click="searching=false"></li>
      </ul>
      <search-bar
      ref="searchBar"
      class="search-bar"
      v-model:searchValue="searchValue"
      :class="{
        quarterWidth: !searching,
        transparent: !searching
      }"
      ></search-bar>
    </div>
    <ul class="pages">
      <li class="pageDate">今天</li>
      <li v-for="(item, idx) of todayHistory" :key="idx" @click="toDetail(item)">
        <h3>{{item.title}}</h3>
        <h4>{{formatDate(item.browseDate)}}</h4>
      </li>
      <li class="pageDate">之前</li>
      <li v-for="(item, idx) of beforeHistory" :key="idx" @click="toDetail(item)">
        <h3>{{item.title}}</h3>
        <h4>{{formatDate(item.browseDate)}}</h4>
      </li>
      <li ref="loading" class="loading"></li>
    </ul>
  </div>
</template>

<script>
import SearchBar from '../utils/SearchBar.vue'

export default {
  components: {
    SearchBar,
  },
  props: {

  },
  data() {
    return {
      searching: false,
      searchValue: '',

      historyType: 0,
    };
  },
  watch: {
    historyType() {
      this.fetchHistory();
    }
  },
  computed: {
    todayHistory() {
      return this.filteredHistory.filter(({browseDate}) => {
        let od = new Date(browseDate);
        od.setHours(0, 0, 0, 0);
        let td = new Date();
        td.setHours(0, 0, 0, 0);
        return od.getDate() === td.getDate();
      });
    },
    beforeHistory() {
      return this.filteredHistory.filter(({browseDate}) => {
        let od = new Date(browseDate);
        od.setHours(0, 0, 0, 0);
        let td = new Date();
        td.setHours(0, 0, 0, 0);
        return od.getDate() !== td.getDate();
      });
    },
    history() {
      let history = this.historyType 
        ? this.$store.state.user.history.source.map(_ => _)
        : this.$store.state.user.history.article.map(_ => _);
      if(this.historyType) {
        history.forEach(item => {
          item.routePath = `/source/${item.id}`
        })
      } else {
        history.forEach(item => {
          item.routePath = `/article/${item.id}`
        })
      }
      return history;
    },
    filteredHistory() {
      return this.history.filter(item => {
        return item.title.includes(this.searchValue) || item.digest.includes(this.searchValue);
      })
    }
  },
  methods: {
    fetchHistory() {
      if(this.historyType) {
        this.$store.commit("fetchHistorySourceAbstracts");
      } else {
        this.$store.commit("fetchHistoryArticleAbstracts");
      }
    },
    search() {
      this.searching = true;
      this.$refs.searchBar.focus();
    },
    toDetail(item) {
      this.$router.push({
        path: item.routePath
      })
    },
    cleanAllHistory() {
      this.$confirm("清空历史记录？", flag => {
        if(flag) {
          if(this.historyType) {
            this.$store.commit("cleanHistorySource");
          } else {
            this.$store.commit('cleanHistoryArticle');
          }
        }
      })
    },
    formatDate(date) {
      return this.$dateUtils.format(date, 'MM-dd HH:mm');
    }
  },
  mounted() {
    this.$scrollLoad({
      root: this.$refs.wrapper,
      loadingComponent: this.$refs.loading,
      callback: () => {
        this.fetchHistory();
      }
    })
  }
}
</script>

<style scoped lang="less">
  .history-card-wrapper {
    width: 300px;
    padding-bottom: 5px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px 1px var(--light);

    &:hover {
      cursor: default;
    }

    .title {
      --h: 40px;
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: 0 13px;
      font-size: 15px;
      height: var(--h);
      line-height: var(--h);
      font-weight: bold;
      color: var(--black);
      border-bottom: 1px solid var(--light);

      .utils {
        display: flex;
        justify-content: space-around;
        align-items: center;

        > li {
          --a: calc(var(--h) * 0.8);
          position: relative;
          margin-right: 5px;
          font-weight: normal;
          width: var(--a);
          height: var(--a);
          line-height: var(--a);
          font-size: 18px;
          border-radius: 3px;
          transition: .3s;

          &:hover {
            background-color: var(--light);
            cursor: pointer;
          }
        }

        .type-select {
          &:hover ul {
            transform: translate(-50%, 0);
            opacity: 1;
          }

          ul {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -10px);
            opacity: 0;

            transition: .2s;

            width: 70px;

            background-color: white;
            box-shadow: 0 0 3px .2px var(--gray);
            border-radius: 3px;

            overflow: hidden;

            > li {
              height: 30px;
              line-height: 30px;
              font-size: 13px;

              &:hover {
                background-color: var(--light);
                cursor: pointer;
              }
            }
          }
        }
      }

      .search-bar {
        --searchBarInnerHeight: calc(var(--h) * 0.8);
        --searchBarWidth: 230px;
        --searchBarHeight: var(--h);
        --searchBarFontSize: 15px;
        --backgroundColor: white;
        --w: var(--searchBarWidth);
        position: absolute;
      }
    }

    .pages {
      padding: 3px 0;
      max-height: 300px;
      overflow-y: auto;
      
      li {
        box-sizing: border-box;

        --h: 30px;
        margin: 3px 10px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        border-radius: 5px;

        color: var(--black);
        font-size: 14px;
        line-height: var(--h);
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;


        &:hover,
        h3:hover,
        h4:hover {
          cursor: pointer;
        }

        h3 {
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &:not(.pageDate):hover {
          background-color: var(--light);
        }

        &.pageDate {
          padding: 0 10px;
          font-weight: bold;

          &:hover {
            cursor: auto;
          }
        }

        &:not(.pageDate) {
          padding-left: 20px;
        }
      }
    }
  }
</style>